<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/directive/ng-class-odd.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>ng-class-odd</span>
</div>

<section>
    <div ng-controller="myCtrl">
        <h3>【为奇数行绑定class类(需与ng-repeat搭配)】</h3>
        <table style="width: 100%;" border="1px">
            <tr ng-repeat="x in student" ng-class-odd="'green'">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
                <td>{{x.height}}</td>
            </tr>
        </table>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<table style="width: 100%;" border="1px">
    <tr ng-repeat="x in student" ng-class-odd="'green'">
        <td>{{x.name}}</td>
        <td>{{x.age}}</td>
        <td>{{x.height}}</td>
    </tr>
</table>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('myCtrl',function($scope,$http){
    $http({
        method:'GET',
        url:'../php/tableData.php'
    }).then(function successCallback(reponse){
        $scope.student = reponse.data.studentObj;
    },function errorCallback(reponse){
        alert('请求失败');
    })
})
            </xmp>
            <span>【php源码】</span>
            <xmp>
<?php
echo <<<EOT
{
"studentObj":[
{"name":"小李","age":"25","height":"175"},
{"name":"小华","age":"26","height":"177"},
{"name":"小明","age":"23","height":"172"},
{"name":"小红","age":"24","height":"165"},
{"name":"小张","age":"25","height":"173"}
]
}
EOT;
?>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>